<template>
    <div v-if="isShow">
        {{ title }}<button @click="updateTitle">修改+消失</button>
    </div>
</template>

<script setup>
import {
    onBeforeMount, onMounted, onBeforeUpdate,
    onUpdated, onBeforeUnmount, onUnmounted
} from 'vue';

import { ref } from 'vue';

onBeforeMount(() => {
    console.log('onBeforeMount');
})
onMounted(() => {
    console.log('onMounted');
})
onBeforeUpdate(() => {
    console.log('onBeforeUpdate');
})
onUpdated(() => {
    console.log('onUpdated');
})
onBeforeUnmount(() => {
    console.log('onBeforeUnmount');
})
onUnmounted(() => {
    console.log('onUnmounted');
})

let isShow = ref(true);
let title = ref('这是一个标题');
const updateTitle = () => {
    title.value = '这是一个新标题！';
    // 2s后注销组件
    setTimeout(() => {
        isShow.value = false;
    }, 2000)
}
</script>

<!-- <script>
import {
    onBeforeMount, onMounted, onBeforeUpdate,
    onUpdated, onBeforeUnmount, onUnmounted
} from 'vue';

import { ref } from 'vue';

export default {
    setup() {
        onBeforeMount(() => {
            console.log('onBeforeMount');
        })
        onMounted(() => {
            console.log('onMounted');
        })
        onBeforeUpdate(() => {
            console.log('onBeforeUpdate');
        })
        onUpdated(() => {
            console.log('onUpdated');
        })
        onBeforeUnmount(() => {
            console.log('onBeforeUnmount');
        })
        onUnmounted(() => {
            console.log('onUnmounted');
        })

        let isShow = ref(true);
        let title = ref('这是一个标题');
        const updateTitle = () => {
            title.value = '这是一个新标题！';
            // 2s后注销组件
            setTimeout(() => {
                isShow.value = false;
            }, 2000)
        }
        return { title, updateTitle, isShow }
    }
}
</script> -->
